<template>
  <el-container>
    <!--头部-->
    <el-header>
      <Header></Header>
    </el-header>
    <el-container>
      <!--左侧-->
      <el-aside>
        <div class="asideup"></div>
        <div class="asidemain">
          <img :src="onehouse.img" />
          <span>{{onehouse.username}}</span>
        </div>
        <div class="asidedown">
          <el-row :gutter="20" class="rowone">
            <el-col :span="20">
              <el-tag type="success">
                <h4>房东名片</h4>
              </el-tag>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="20">
              等级：
              <el-rate v-model="value1" style="display: inline-block;"></el-rate>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="20">
              电子邮件：
              <span>{{onehouse.email}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="20">
              手机号码：
              <span>{{onehouse.phone}}</span>
            </el-col>
          </el-row>
        </div>


      </el-aside>
      <!--主体-->
      <el-main>
        <!--方位图轮播开始-->
        <template>
          <el-carousel :interval="2000" type="card" height="200px">
            <el-carousel-item v-for="(item,index) in houses" :key="index">
              <h3 class="medium"><img :src="item.imgsurl" alt=""></h3>
            </el-carousel-item>
          </el-carousel>
        </template>
        <!--方位图结束-->
        <!--详情信息开始-->
        <div class="infoDiv">
          <el-row :gutter="22" class="rowone">
            <el-col :span="18">
              <el-tag type="success">
                <h2>{{onehouse.htype}}</h2>
              </el-tag>
              <span class="title">{{onehouse.housetitle}}</span>
            </el-col>
            <el-col :span="2"><a href="javascript:;"><span>收藏<i class="el-icon-star-off"></i></span></a> </el-col>
            <el-col :span="4"><span>浏览数({{onehouse.browse}})</span></el-col>
          </el-row>
          <el-row :gutter="18">
            <el-col :span="7">房屋编号：<span>{{onehouse.houseid}}</span></el-col>
            <el-col :span="7">发布时间：<span>{{onehouse.publishtime}}</span></el-col>
          </el-row>

          <el-row :gutter="18">
            <el-col :span="7">所属小区：<span>{{onehouse.areaname}}</span></el-col>
            <el-col :span="7">房屋户型：
              <!--几室几厅 0全 1三室 2四室 3五室 4五室以上-->
              <span v-if="onehouse.apartment===1">三室</span>
              <span v-if="onehouse.apartment===2">四室</span>
              <span v-if="onehouse.apartment===3">五室</span>
              <span v-if="onehouse.apartment===4">五室以上</span>
            </el-col>
            <el-col :span="7">房屋单价：<span>{{onehouse.houseprice}}万元/m²</span></el-col>
          </el-row>
          <el-row :gutter="18">
            <el-col :span="7">所在位置：<span>{{onehouse.address}}</span></el-col>
            <el-col :span="7">所在楼层：
              <!--几层楼0全 1:6层以下 2:6-12层 3 12层以上-->
              <span v-if="onehouse.floor===1">6层以下</span>
              <span v-if="onehouse.floor===2">6-12层</span>
              <span v-if="onehouse.floor===3">12层以上</span>
            </el-col>
            <el-col :span="7">房屋面积：<span>{{onehouse.areas}}m²</span></el-col>
          </el-row>
          <el-row :gutter="18">
            <!--level1经济型2中档型3高档型4豪华型-->
            <el-col :span="7">房屋类型：
              <span v-if="onehouse.level===1">经济型</span>
              <span v-if="onehouse.level===2">中档型</span>
              <span v-if="onehouse.level===3">高档型</span>
              <span v-if="onehouse.level===4">豪华型</span>
            </el-col>
            <el-col :span="7">房屋朝向：
              <!--朝向 0全 1东南 2西南 3东北 4西北-->
              <span v-if="onehouse.floor===1">东南</span>
              <span v-if="onehouse.floor===2">西南</span>
              <span v-if="onehouse.floor===3">东北</span>
              <span v-if="onehouse.floor===4">西北</span>方向
            </el-col>
            <el-col :span="7">有无电梯：<span>{{onehouse.elevator}}</span></el-col>
          </el-row>
        </div>
        <!--详情信息结束-->
        <!--核心卖点开始-->
        <div class="infoDiv">
          <el-row :gutter="0" class="rowone">
            <!--level1经济型2中档型3高档型4豪华型-->
            <el-col :span="25">
              <h3>核心卖点：</h3>
            </el-col>
          </el-row>
          <span>{{onehouse.houseinfo}}</span>
        </div>
        <!--核心卖点结束-->
        <!--地图定位开始-->
        <div class="infoDiv">
          <el-row :gutter="0" class="rowone">
            <!--level1经济型2中档型3高档型4豪华型-->
            <el-col :span="25">
              <h3>地图定位：</h3>
            </el-col>
          </el-row>
          <!--地图显示-->
          <div id="container"></div>

        </div>
        <!--地图定位结束-->
        <!--评论区开始-->
        <div class="infoDiv">
          <el-row :gutter="0" class="rowone">
            <!--level1经济型2中档型3高档型4豪华型-->
            <el-col :span="25">
              <h3>评论区：</h3>
            </el-col>
          </el-row>
          <el-input v-model="content" type="textarea" placeholder="请输入内容" maxlength="30" show-word-limit />
          <el-button style="float: right;margin-top:5px;margin-bottom: 15px;" type="success" @click="addComment">发布</el-button>
        </div>

        <div class="infoDiv showCom">
          <el-row v-for="(item,index) in comlist" :key="index">
            <el-col :span="24"><i class="el-icon-user-solid"></i> {{item.content}} <span id="publishtime">{{item.publish}}</span></el-col>
          </el-row>
        </div>

        <!--评论区结束-->

      </el-main>

    </el-container>
  </el-container>

</template>

<script>
  import Header from '../../components/main/Header.vue' //头部
  //地图
  var geocoder, map, marker, InfoWindow = null;
  export default {
    components: {
      Header
    },
    data() {
      return {
        content: '', //发表评论的文本域
        value1: 3, //等级值
        houses: [], //详情数组
        comlist: [], //评论列表
        onehouse: {} //单个详情对象
      }
    },
    mounted() {
      this.getInfo(); //获取详情
    },
    methods: {
      
      //添加评论
      async addComment() {
        //获取用户信息
        let user= window.sessionStorage.getItem('user');
        console.log(user);
        //判断是否登录
        if(!user){
          return this.$router.push('/login') //去登录
        }
        //已登录,添加评论操作
        const {
          data: res
        } = await this.$axios.get('HouseController/addComment.action', {
          params: { // 参数
            chouseid: this.onehouse.houseid,
            cuserid: JSON.parse(user).userid,
            content: this.content
          }
        })
        if (res > 0) {
          this.content = '';
          this.showCom();
          return this.$message.success('发布成功！');

        }

      },
      //显示评论列表
      async showCom() {
        const {
          data: res
        } = await this.$axios.get('HouseController/findComment.action', {
          params: { // 参数
            chouseid: this.onehouse.houseid
          }
        })
        this.comlist = res;
      },

      //获取详情
      async getInfo() {
        var houseid = this.$route.query.id
        //  console.log(houseid);
        // 根据houseid查询对应的信息
        const {
          data: res
        } = await this.$axios.get('HouseController/houseInfo.action', {
          params: { // 参数
            id: houseid
          }
        })
        this.houses = res;
        this.onehouse = res[0];
        // console.log(this.onehouse.browse);
        this.initMap(); //获取地图
        this.updateBrowse(); //修改浏览数
        this.showCom(); //评论列表
      },
      //修改浏览数
      async updateBrowse() {
        this.onehouse.browse = parseInt(this.onehouse.browse) + 0 + 1;
        // console.log(this.onehouse.browse);
        const {
          data: res
        } = await this.$axios.get(
          'HouseController/updateHouse.action', {
            params: {
              houseid: this.onehouse.houseid,
              browse: this.onehouse.browse
            }
          }
        )
        if (res < 1) return this.$message.error('失败！')
      },
      //初始化地图
      initMap() {
        var that = this;
        console.log(this.onehouse.latitude, this.onehouse.longitude);
        var center = new qq.maps.LatLng(this.onehouse.latitude, this.onehouse.longitude);
        var map = new qq.maps.Map(document.getElementById("container"), {
          center: center,
          zoom: 16
        });
        //创建marker标注
        var marker = new qq.maps.Marker({
          position: center,
          map: map
        });
        // 提示窗
        var info = new qq.maps.InfoWindow({
          map: map
        });
        // 悬浮标记显示信息
        qq.maps.event.addListener(marker, 'mouseover', function() {
          info.open();
          info.setContent("<div style='margin:10px;'>" + that.onehouse.addressinfo + "</div>");
          info.setPosition(center);
        });
        qq.maps.event.addListener(marker, 'mouseout', function() {
          info.close();
        });

      }
    }
  }
</script>

<style>
  #publishtime {
    float: right;
    font-size: 13px;
    color: #666666;
    margin-top: 10px;
  }

  /*栅栏布局*/
  .el-row {
    margin-bottom: 20px;
    padding-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  /*左侧*/
  .el-aside {
    margin: 9px 4px 0 12px;
    width: 250px;
    height: 460px;
    border: 1px solid #e6e6e6;
    padding-bottom: 15px;
  }

  .asideup {
    width: 100%;
    height: 90px;
    background-color: #00AC84;
  }

  .asidemain {
    width: 100%;
    height: 150px;
  }

  .asidemain img {
    width: 45%;
    height: 90%;
    padding: 10px;
    float: left;
  }

  .asidemain span {
    width: 40%;
    float: right;
    font-size: 20px;
    padding-top: 25%;
  }

  .asidedown {
    width: 90%;
    height: 200px;
    margin-left: 12px;
  }


  /*详情信息*/
  .infoDiv {
    width: 100%;
    height: auto;
    margin-bottom: 48px;
    /* border-bottom: 1px solid #e6e6e6; */
  }

  /*评论显示列表*/
  .showCom .el-row {
    border-bottom: 1px solid #E9E9E8;
    margin-bottom: 32px;
  }

  /*地图显示区*/
  #container {
    width: 100%;
    height: 300px;
    margin: 10px auto;
  }

  h3 {
    color: #63ad02
  }

  .rowone {
    padding-bottom: 8px;
    border-bottom: 1px dotted #e6e6e6;
  }

  .title {
    font-size: 30px;
    line-height: 30px;
    margin-bottom: 15px;
    margin-top: 10px;
    margin-left: 15px;
    color: #333;
    font-weight: bold;
  }

  .el-col {
    font-size: 16px;
    color: #666;
  }

  span {
    color: #000000;
  }

  /*主体方位图*/
  .el-main {
    padding: 0px 8px;
    margin: 0;
    border-top: 2px solid #63ad02;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
